import React, { Component } from 'react'
import { Link, Outlet } from 'react-router-dom'

export default class Message extends Component {
  state = {
    msgArr: [
      { id: '001', title: 'msg01' },
      { id: '002', title: 'msg02' },
      { id: '003', title: 'msg03' },
    ],
  }
  render() {
    return (
      <div>
        <ol>
          {this.state.msgArr.map(item => {
            return (
              <li key={item.id}>
                <Link to={`detail/${item.id}/${item.title}`}>{item.title}</Link>
              </li>
            )
          })}
        </ol>
        <div className="content">
          {/* <Route path="/home/msg/detail/:id/:title" component={MsgDetail}></Route> */}
          <Outlet/>
        </div>
      </div>
    )
  }
}
